<template>
  <div class="tab-container" id="tab-container">
    <div class="tab-fixed">
      <div
        class="tab-item"
        :class="{ 'tab-item-active': tableBody.customerGroupId === '0' }"
        @click="handelGroupChange('0', '1')"
      >
        全部
      </div>
    </div>
    <!--    <div class="drag-container" :style="{ 'padding-left': isShow ? '10px' : '0px' }">-->
    <!--      <svg-icon v-if="isShow" iconClass="drag-left" @click="handelLeft" />-->
    <VueDraggableNext
      class="dragArea"
      id="tabsContainer"
      v-model="groupList"
      chosenClass="chosenClass"
      :animation="500"
      :forceFallback="true"
      :capture="true"
      handle=".drag-handle"
      filter=".un-drag"
      :move="onMove"
      @start="handelDragStart"
      @end="handelDragEnd"
    >
      <div
        class="tab-item drag-handle"
        :class="{
          'un-drag': item.isDrag,
          'tab-item-active': tableBody.customerGroupId === item.customerGroupId,
          'tab-start-drag': !item.isDrag && isStartDrag
        }"
        @click="handelGroupChange(item.customerGroupId, item.GroupType)"
        v-for="item in groupList"
        :key="item.customerGroupId"
      >
        <div class="tab-item_label">
          {{ item.customerGroupName }}
        </div>
        <img v-show="!item.isDrag && isStartDrag" class="tab-item_icon" :src="require('@/assets/images/image/drag-handle.png')" />
      </div>
    </VueDraggableNext>
    <!--      <svg-icon v-if="isShow" iconClass="drag-right" @click="handelRight" />-->
    <!--    </div>-->
  </div>
</template>

<script setup>
import { computed, nextTick, onMounted, onUnmounted, ref } from "vue";
import { VueDraggableNext } from "vue-draggable-next";
import _ from "lodash";
import { groupList as groups, groupSort } from "@/apis/clientManager";

const props = defineProps({
  modelValue: {
    type: Object,
    default: () => ({})
  }
});
const emit = defineEmits(["update:modelValue", "getList"]);
const tableBody = computed({
  get() {
    return props.modelValue;
  },
  set(val) {
    emit("update:modelValue", val);
  }
});

const groupList = ref([
  {
    customerGroupName: "今日新增",
    customerGroupId: "1",
    isDrag: true,
    GroupType: "1"
  },
  {
    customerGroupName: "本周新增",
    customerGroupId: "2",
    isDrag: true,
    GroupType: "1"
  },
  {
    customerGroupName: "今日跟进",
    customerGroupId: "3",
    isDrag: true,
    GroupType: "1"
  },
  {
    customerGroupName: "本周跟进",
    customerGroupId: "4",
    isDrag: true,
    GroupType: "1"
  }
]);
const isStartDrag = ref(false);
let cloneGroupList = [];
const handelGroupChange = (groupId, GroupType) => {
  tableBody.value.customerGroupId = groupId;
  tableBody.value.groupType = GroupType;
  emit("getList");
};
const handelDragStart = () => {
  isStartDrag.value = true;
  cloneGroupList = _.cloneDeep(groupList.value);
};
const onMove = e => {
  return ![0, 1, 2, 3].includes(e.relatedContext.index);
};
const handelDragEnd = () => {
  isStartDrag.value = false;
  submitGroupSort();
};

const handleScroll = e => {
  const direction = e.deltaY > 0 ? "0" : "1";
  const tabBar = document.getElementById("tabsContainer");
  if (direction === "0") {
    tabBar.scrollLeft += 30;
  } else {
    tabBar.scrollLeft -= 30;
  }
};
// const handelLeft = () => {
//   const tabBar = document.getElementById("tabsContainer");
//   tabBar.scrollLeft += 110;
// };
// const handelRight = () => {
//   const tabBar = document.getElementById("tabsContainer");
//   tabBar.scrollLeft -= 110;
// };

const getGroupList = async () => {
  const { data } = await groups();
  const list = data || [];
  list.forEach(item => {
    item.GroupType = "2";
  });
  groupList.value.push(...list);
  // await nextTick();
  // listenerContainerOver();
};
const submitGroupSort = async () => {
  try {
    const ids = [1, 2, 3, 4];
    const filterList = groupList.value.filter(item => !ids.includes(Number(item.customerGroupId)));
    await groupSort(filterList);
  } catch (err) {
    groupList.value = cloneGroupList;
    cloneGroupList = [];
  }
};

const isShow = ref(false);
const listenerContainerOver = () => {
  const tabBar = document.getElementById("tabsContainer");
  const tabContainerBox = document.getElementById("tab-container");
  isShow.value = tabBar.scrollWidth > tabContainerBox.clientWidth;
};

onMounted(() => {
  const tabBar = document.getElementById("tabsContainer");
  tabBar.addEventListener("wheel", handleScroll, { passive: true }); // 监听滚轮滚动事件
  // window.addEventListener("resize", listenerContainerOver);
});
onUnmounted(() => {
  const tabBar = document.getElementById("tabsContainer");
  tabBar.removeEventListener("wheel", handleScroll);
  // window.removeEventListener("resize", listenerContainerOver);
});

getGroupList();
</script>

<style scoped lang="scss">
@use "draggableTab";
</style>
